<!-- 页面 -->
<template>
    <div>
        <div class="block">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in list1.list" :key="item">
                    <h3 class="small"><img :src="item.cover_img"></h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="dahe">
            <div class="xhe"><img class="aaa" src="./1.jpg" alt=""></div>
            <div class="xhe"><img class="aaa" src="./1.jpg" alt=""></div>
            <div class="xhe"><img class="aaa" src="./1.jpg" alt=""></div>
        </div>
        <van v-for="(item, index2) in list " :key="index2">
            <van-sidebar>
                <van-sidebar-item :title="item.title" />
            </van-sidebar>
            <div v-for="(item, index) of list" :key="index">
                <div v-for="(item1, index1) of item.teachers_list" :key="index1">
                    <van-card :desc="item1.teacher_name" :thumb="item1.teacher_avatar" />
                </div>
            </div>
        </van>
    </div>
</template>
<!-- vue -->
<script>
export default {
    data () {
        return {
            // 声明的属性
            list: [],
            list1: []
        }
    },
    //生命周期函数
    mounted () {
        this.$axios.get( 'http://120.53.31.103:84/api/app/courseBasis' ).then( res => {
            // console.log(res);
            this.list = res.data.data.list
            console.log( this.list );
        } ),
            this.$axios.get( 'http://120.53.31.103:84/api/app/courseBasis' ).then( res => {
                // console.log(res);
                this.list1 = res.data.data
                console.log( this.list1 );
            } )
    },
    // 调用方法
    methods: {
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.xhe {
    border: 1px solid #000;
    border-radius: 20px;
    width: 4rem;
    height: 4rem;
    background-color: aqua;
}

.dahe {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: -25px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.aaa {
    width: 4rem;
    height: 4rem;
    border-radius: 20px;
}
</style>